<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<!-- 搜索 -->
			<view class="search-box">
				<xh-agent-search tipText="为了保护市场规范,只显示您直营的代理商数据" v-model="keywords" :sortList="sortList" @sortResult="sortResult" @searchResult="searchResult"></xh-agent-search>
			</view>
		</template>
		<!-- 列表  -->
		<view class="bills-agent-list">
			<view class="bills-agent-list-item" v-for="item in dataList" :key="item.agentId" @tap="didSelectAgent(item)">
				<view class="bills-agent-list-item-top">
					<image src="/static/operate/agent_photo.png" mode="aspectFit"></image>
					<view class="bills-agent-list-item-top-container">
						<text>{{item.agentName}}</text>
						<text>{{item.contactNo}}</text>
					</view>
				</view>
				<view class="bills-agent-list-item-bottom">
					<view class="bills-agent-list-item-bottom-item">
						<text>{{props.type == '考核' ? '待结金额' : '待收货款'}}</text>
						<text>{{props.type == '考核' ? item.assessUnpayAmount : item.billUnpayAmount}}</text>
					</view>
					<view class="bills-agent-list-item-bottom-item">
						<text>{{props.type == '考核' ? '已结金额' : '已收货款'}}</text>
						<text>{{props.type == '考核' ? item.assessPayAmount : item.billPayAmount}}</text>
					</view>
				</view>
			</view>
		</view>

	</z-paging>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getAgentAssessBillPaymentList, getAgentGoodsBillPaymentList } from '@/common/api/api.js'
	const sortList = ref([{ value: '按待结金额', key: 'ASS_AMT_TOBE' }, { value: '按已结金额', key: 'ASS_AMT_PAST' }])
	const props = defineProps(['type'])
	const pagingRef = ref(null)
	const dataList = ref([])
	const keywords = ref('')
	const selectSortKey = ref('')
	// 选择指定代理商
	const didSelectAgent = (item) => {
		uni.navigateTo({
			url: `/pages/home/agent-manager/agent-info/payment-bill/payment-bill?type=${props.type}&agentId=${item.agentId}`
		})
	}
	const sortResult = (sort)=>{
		selectSortKey.value = sort
		pagingRef.value.reload()
	}
	const searchResult = ()=>{
		pagingRef.value.reload()
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		if(!uni.$uv.test.empty(selectSortKey.value)){
			params.sortField = selectSortKey.value
		}
		if(uni.$uv.test.mobile(keywords.value)){
			params.contactNo = keywords.value
		}
		else{
			params.agentName = keywords.value
		}
		if(props.type == '考核'){
			const res = await getAgentAssessBillPaymentList(params, pageNo)
			const list = res.result
			if(pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value,...list]
			pagingRef.value.completeByTotal(list,res.page.totalElements)
		}
		else{
			const res = await getAgentGoodsBillPaymentList(params, pageNo)
			const list = res.result
			if(pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value,...list]
			pagingRef.value.completeByTotal(list,res.page.totalElements)
		}
	}
	
	onLoad(() => {
		if (props.type == '考核') {
			uni.setNavigationBarTitle({
				title: '待结考核代理商'
			})
			sortList.value = [{ value: '按待结金额', key: 'ASS_AMT_TOBE' }, { value: '按已结金额', key: 'ASS_AMT_PAST' }]
		} else {
			uni.setNavigationBarTitle({
				title: '待收货款代理商'
			})
			sortList.value = [{ value: '按待收货款', key: 'GOODS_AMT_TOBE' }, { value: '按已收货款', key: 'GOODS_AMT_PAST' }]
		}
	})
	
</script>

<style lang="scss" scoped>
	.search-box {
		padding: 30rpx 30rpx 0;
	}

	.bills-agent-list {
		padding: 0 30rpx 30rpx;

		.bills-agent-list-item {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.bills-agent-list-item-top {
				display: flex;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
				}

				.bills-agent-list-item-top-container {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;

					text:nth-child(2) {
						color: $xh-color-9;
						font-size: 26rpx;
						margin-top: 16rpx;
					}
				}
			}

			.bills-agent-list-item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 40rpx;

				.bills-agent-list-item-bottom-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					text:nth-child(1) {
						font-size: 26rpx;
						color: $xh-color-9;
					}

					text:nth-child(2) {
						font-size: 32rpx;
						color: $xh-orange-color;
						margin-top: 16rpx;
					}
				}
			}
		}
	}
</style>